//第十二章 DOM2和DOM3

//操作css

//获取某个link元素或者styl元素的样式
function getStyleSheet(element) {
    // element.styleSheet 是ie下的
    return element.sheet || element.styleSheet;
}

var link0 = document.getElementsByTagName('style')[0];
var style = getStyleSheet(link0); // CSSStyleSheet 对象
// style.insertRule('',0) //插入一条css规则; 参数1 是要插入的css样式字符串，第二个参数是位置 0开始
console.log('style=',style);
var rule =  style.cssRules[1]; // CSSStyleRule对象  cssRules ie不支持该属性 ie下用rules 外部css style.cssRules是null
console.log('rule.selectorText=',rule.selectorText); //选择器名称
console.log('rule.style=',rule.style); //CSSStyleDeclaration  对象,通过它设置或获取样式值
console.log('rule.cssText=',rule.cssText); //返回整个定义的css文本内容

var div = document.getElementsByClassName('panel');
console.log("---------------------");
console.log("div.clientHeight",div.clientHeight);
console.log("div.clientWidth",div.clientWidth);
console.log("div.scrollWidth",div.scrollWidth);
console.log("div.scrollHeight",div.scrollHeight);

console.log('divStyle1=');
/*
3. 滚动大小 p324
最后要介绍的是滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。有些元素（例如
<html>元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过CSS 的
overflow 属性进行设置才能滚动。以下是4 个与滚动大小相关的属性。
 scrollHeight：在没有滚动条的情况下，元素内容的总高度。
 scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
 scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
把滚动条向右拉 scrollLeft 变大 ,滚动条向下 scrollTop 变大
*/

//2017年12月26日16:13:55 第十二章 需要再回头看

